<template>
  <el-form
      v-loading.fullscreen.lock="fullscreenLoading"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item class="maxWidth" label="名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>

    <el-form-item class="maxWidth" label="菜品详情" prop="desc">
      <el-input v-model="ruleForm.desc" />
    </el-form-item>

    <el-form-item class="maxWidth" label="价格" prop="price">
      <el-input v-model="ruleForm.price" />
    </el-form-item>

    <el-form-item class="maxWidth" label="所属分类" prop="categoryId">
      <el-select v-model="ruleForm.categoryId" clearable placeholder="请选择分类">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
      </el-select>
    </el-form-item>

    <el-form-item label="菜品图片" prop="files">
      <foodImages v-model="ruleForm.files"></foodImages>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import {getCategory} from "../../../api/epgms/menu/category";
import foodImages from "./compoments/card/index.vue"
import {createFood} from "../../../api/epgms/menu/food";
import {ElMessage} from "element-plus";


const fullscreenLoading = ref(false)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  price: '',
  files: [],
  categoryId: '',
  desc: '',
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入菜品名称', trigger: 'blur' },
    { min: 1, max: 20, message: '菜品名称最少一位数最大20位', trigger: 'blur' },
  ],
  price: [
    {
      required: true,
      message: '请输入菜品价格',
      trigger: 'blur',
    },
  ],
  files: [
    {
      type: "array",
      required: true,
      message: '请选择菜品图片',
      trigger: 'change',
    },
  ],
  categoryId: [
    { required: true, message: '请选择菜品分类', trigger: 'blur' },
  ],
  desc: [
    { required: true, message: '请描述菜品的口味, 美感等', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')

      const form = new FormData()
      for (const fi of ruleForm.files) {
        form.append("files", fi.raw)
      }
      for (const formKey in ruleForm) {
        if(formKey === "categoryId"){
          form.append("category_id", ruleForm[formKey])
          continue
        }
        if (formKey !== "files"){
          form.append(formKey, ruleForm[formKey])
        }
      }
      fullscreenLoading.value = true
      createFood(form).then((res) => {
        console.log(res)
        formEl.resetFields()
        ElMessage({
          type: "success",
          message: res.msg
        })
      }).finally(() => {
        fullscreenLoading.value = false
      })

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = reactive([])
const getCate = async () => {
  const {data: {category_list}} = await getCategory()
  options.splice(0, options.length)
  console.log(category_list)
  options.push(...category_list)
}
getCate()
</script>

<style scoped lang="less">
.maxWidth{
  width: 30%
}

</style>
